Card.render - Code Metrics - Inspection of "Migration to Gatsby 3. (#356)" - soniCaH/KCVV-Elewijt-Gatsby - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Push — release/gatsby-3 ( 9bef49 )

by Kevin Van

created 2021-03-11 12:04 UTC

Card.render B

↳ Parent: Project

Complexity

Conditions

Size

Total Lines	76
Code Lines	60

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
eloc	60
dl	0
loc	76
rs	8.309
c	0
b	0
f	0
cc	1

How to fix Long Method

import React, { Component } from "react"
import { Link } from "gatsby"
import Img from "gatsby-image"

import Icon from "./icon"

import "./cards.scss"

/**
 * Render a card layout (image / tag / title / excerpt).
 */
export class Card extends Component {
  render() {
    const {
      title,
      icon = null,
      body = null,
      localFile,
      link,
      metadata = false,
      tags = [],
      created = null,
    } = this.props

    const image = (
      <Img
        fluid={{
          ...localFile.childImageSharp.fluid,
          aspectRatio: 3 / 2,
        }}
        alt={title}
      />
    )

    const absoluteUrlRegex = /^https?:\/\/|^\/\//i

    return (
      <article className={"cardItem"}>
        {absoluteUrlRegex.test(link) || (
          <Link to={link}>
            <header>
              <figure>{image}</figure>
            </header>

            <main className={"cardItem__summary"}>
              <div className={"cardItem__heading"}>
                <h3>{icon && <Icon icon={icon}/>} {title}</h3>
              </div>

              {body && <div dangerouslySetInnerHTML={{ __html: body }}></div>}
            </main>
          </Link>
        )}

        {absoluteUrlRegex.test(link) && (
          <a href={link} target="_blank" rel="noopener noreferrer">
            <header>
              <figure>{image}</figure>
            </header>

            <main className={"cardItem__summary"}>
              <div className={"cardItem__heading"}>
                <h3>{icon && <i className={`fa ${icon}`} aria-hidden={true}></i>} {title}</h3>
              </div>

              {body && <div dangerouslySetInnerHTML={{ __html: body }}></div>}
            </main>
          </a>
        )}

        {metadata && (
          <footer className={"cardItem__footer article__tags"}>
            <span className={"datetime"}>
              <i className={"fa fa-clock-o"} aria-hidden="true"></i> {created}
            </span>
            {tags.length > 0 && (
              <span className={"tag__wrapper"}>
                <i className={"fa fa-tags"} aria-hidden="true"></i>{" "}
                {tags.map(({ path, name }, i) => (
                  <Link to={path.alias} key={i}>
                    <span className={"tag__label"}>#{name}</span>
                  </Link>
                ))}
              </span>
            )}
          </footer>
        )}
      </article>
    )
  }
}

export class CardImage extends Component {
  render() {
    const { title, localFile, link, body = null } = this.props
    const absoluteUrlRegex = /^https?:\/\/|^\/\//i

    const image = (
      <Img
        fluid={{
          ...localFile.childImageSharp.fluid,
          aspectRatio: 2 / 1,
        }}
        alt={title}
      />
    )

    const content = (
      <header>
        <figure>{image}</figure>
        <div className={"gradient gradient--70"}></div>
        <div className={"cardItem__heading"}>
          <h3>{title}</h3>
          {body && <div dangerouslySetInnerHTML={{ __html: body }}></div>}
        </div>
      </header>
    )

    return (
      <article className={"cardItem cardItem--image"}>
        {link === false && content}
        {link !== false &&
          (absoluteUrlRegex.test(link) || <Link to={link}>{content}</Link>)}
        {link !== false && absoluteUrlRegex.test(link) && (
          <a href={link} target="_blank" rel="noopener noreferrer">
            {content}
          </a>
        )}
      </article>
    )
  }
}

export class SingleImageCard extends Component {
  render() {
    const { localFile, link } = this.props

    const absoluteUrlRegex = /^https?:\/\/|^\/\//i

    const image = (
      <Img
        fluid={{
          ...localFile.childImageSharp.fluid,
          aspectRatio: 2 / 1,
        }}
      />
    )

    return (
      <article className={"cardItem cardItem--vertical"}>
        {absoluteUrlRegex.test(link) || (
          <Link to={link}>
            <header>
              <figure>{image}</figure>
            </header>
          </Link>
        )}
        {absoluteUrlRegex.test(link) && (
          <a href={link} target="_blank" rel="noopener noreferrer">
            <header>
              <figure>{image}</figure>
            </header>
          </a>
        )}
      </article>
    )
  }
}

export class CardVertical extends Component {
  render() {
    const { title, localFile, link } = this.props

    const absoluteUrlRegex = /^https?:\/\/|^\/\//i

    const image = (
      <Img
        fluid={{
          ...localFile.childImageSharp.fluid,
          aspectRatio: 6 / 8,
        }}
        alt={title}
      />
    )

    return (
      <article className={"cardItem cardItem--vertical"}>
        {absoluteUrlRegex.test(link) || (
          <Link to={link}>
            <header>
              <figure>{image}</figure>
              <div className={"gradient gradient--70"}></div>
              <div className={"cardItem__heading"}>
                <h3>{title}</h3>
              </div>
            </header>
          </Link>
        )}
        {absoluteUrlRegex.test(link) && (
          <a href={link} target="_blank" rel="noopener noreferrer">
            <header>
              <figure>{image}</figure>
              <div className={"gradient gradient--70"}></div>
              <div className={"cardItem__heading"}>
                <h3>{title}</h3>
              </div>
            </header>
          </a>
        )}
      </article>
    )
  }
}


1			import React, { Component } from "react"
2			import { Link } from "gatsby"
3			import Img from "gatsby-image"
4
5			import Icon from "./icon"
6
7			import "./cards.scss"
8
9			/**
10			* Render a card layout (image / tag / title / excerpt).
11			*/
12			export class Card extends Component {
13			render() {
14			const {
15			title,
16			icon = null,
17			body = null,
18			localFile,
19			link,
20			metadata = false,
21			tags = [],
22			created = null,
23			} = this.props
24
25			const image = (
26			<Img
27			fluid={{
28			...localFile.childImageSharp.fluid,
29			aspectRatio: 3 / 2,
30			}}
31			alt={title}
32			/>
33			)
34
35			const absoluteUrlRegex = /^https?:\/\/\|^\/\//i
36
37			return (
38			<article className={"cardItem"}>
39			{absoluteUrlRegex.test(link) \|\| (
40			<Link to={link}>
41			<header>
42			<figure>{image}</figure>
43			</header>
44
45			<main className={"cardItem__summary"}>
46			<div className={"cardItem__heading"}>
47			<h3>{icon && <Icon icon={icon}/>} {title}</h3>
48			</div>
49
50			{body && <div dangerouslySetInnerHTML={{ __html: body }}></div>}
51			</main>
52			</Link>
53			)}
54
55			{absoluteUrlRegex.test(link) && (
56			<a href={link} target="_blank" rel="noopener noreferrer">
57			<header>
58			<figure>{image}</figure>
59			</header>
60
61			<main className={"cardItem__summary"}>
62			<div className={"cardItem__heading"}>
63			<h3>{icon && <i className={`fa ${icon}`} aria-hidden={true}></i>} {title}</h3>
64			</div>
65
66			{body && <div dangerouslySetInnerHTML={{ __html: body }}></div>}
67			</main>
68			</a>
69			)}
70
71			{metadata && (
72			<footer className={"cardItem__footer article__tags"}>
73			<span className={"datetime"}>
74			<i className={"fa fa-clock-o"} aria-hidden="true"></i> {created}
75			</span>
76			{tags.length > 0 && (
77			<span className={"tag__wrapper"}>
78			<i className={"fa fa-tags"} aria-hidden="true"></i>{" "}
79			{tags.map(({ path, name }, i) => (
80			<Link to={path.alias} key={i}>
81			<span className={"tag__label"}>#{name}</span>
82			</Link>
83			))}
84			</span>
85			)}
86			</footer>
87			)}
88			</article>
89			)
90			}
91			}
92
93			export class CardImage extends Component {
94			render() {
95			const { title, localFile, link, body = null } = this.props
96			const absoluteUrlRegex = /^https?:\/\/\|^\/\//i
97
98			const image = (
99			<Img
100			fluid={{
101			...localFile.childImageSharp.fluid,
102			aspectRatio: 2 / 1,
103			}}
104			alt={title}
105			/>
106			)
107
108			const content = (
109			<header>
110			<figure>{image}</figure>
111			<div className={"gradient gradient--70"}></div>
112			<div className={"cardItem__heading"}>
113			<h3>{title}</h3>
114			{body && <div dangerouslySetInnerHTML={{ __html: body }}></div>}
115			</div>
116			</header>
117			)
118
119			return (
120			<article className={"cardItem cardItem--image"}>
121			{link === false && content}
122			{link !== false &&
123			(absoluteUrlRegex.test(link) \|\| <Link to={link}>{content}</Link>)}
124			{link !== false && absoluteUrlRegex.test(link) && (
125			<a href={link} target="_blank" rel="noopener noreferrer">
126			{content}
127			</a>
128			)}
129			</article>
130			)
131			}
132			}
133
134			export class SingleImageCard extends Component {
135			render() {
136			const { localFile, link } = this.props
137
138			const absoluteUrlRegex = /^https?:\/\/\|^\/\//i
139
140			const image = (
141			<Img
142			fluid={{
143			...localFile.childImageSharp.fluid,
144			aspectRatio: 2 / 1,
145			}}
146			/>
147			)
148
149			return (
150			<article className={"cardItem cardItem--vertical"}>
151			{absoluteUrlRegex.test(link) \|\| (
152			<Link to={link}>
153			<header>
154			<figure>{image}</figure>
155			</header>
156			</Link>
157			)}
158			{absoluteUrlRegex.test(link) && (
159			<a href={link} target="_blank" rel="noopener noreferrer">
160			<header>
161			<figure>{image}</figure>
162			</header>
163			</a>
164			)}
165			</article>
166			)
167			}
168			}
169
170			export class CardVertical extends Component {
171			render() {
172			const { title, localFile, link } = this.props
173
174			const absoluteUrlRegex = /^https?:\/\/\|^\/\//i
175
176			const image = (
177			<Img
178			fluid={{
179			...localFile.childImageSharp.fluid,
180			aspectRatio: 6 / 8,
181			}}
182			alt={title}
183			/>
184			)
185
186			return (
187			<article className={"cardItem cardItem--vertical"}>
188			{absoluteUrlRegex.test(link) \|\| (
189			<Link to={link}>
190			<header>
191			<figure>{image}</figure>
192			<div className={"gradient gradient--70"}></div>
193			<div className={"cardItem__heading"}>
194			<h3>{title}</h3>
195			</div>
196			</header>
197			</Link>
198			)}
199			{absoluteUrlRegex.test(link) && (
200			<a href={link} target="_blank" rel="noopener noreferrer">
201			<header>
202			<figure>{image}</figure>
203			<div className={"gradient gradient--70"}></div>
204			<div className={"cardItem__heading"}>
205			<h3>{title}</h3>
206			</div>
207			</header>
208			</a>
209			)}
210			</article>
211			)
212			}
213			}
214

soniCaH / KCVV-Elewijt-Gatsby

Push — release/gatsby-3 ( 9bef49 )

Card.render B

Complexity

Size

Duplication

Importance

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like